import React from 'react';
import { useNavigate } from 'react-router';
import { motion } from 'framer-motion';
import WelcomePage from '../components/WelcomePage';
import { patternsData } from '../data/patterns';

const HomePage: React.FC = () => {
  const navigate = useNavigate();

  const handleStartLearning = () => {
    const firstPattern = patternsData[0];
    navigate(`/pattern/${firstPattern.id}`);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <motion.div
      key="welcome"
      initial={{ opacity: 0, x: 20 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, x: -20 }}
      transition={{ duration: 0.3 }}
    >
      <WelcomePage 
        onStartLearning={handleStartLearning}
      />
    </motion.div>
  );
};

export default HomePage;
